<template>
  <ElFormItem v-bind="getFormItemProps">
    <slot></slot>
  </ElFormItem>
</template>

<script setup lang="ts" name="FormItemWrapper">
import { ElFormItem } from "element-plus";
import { computed } from "vue";
const props = defineProps({
  widget: {
    type: Object
  },
  formModel: {
    type: Object
  },
  showLabel: {
    type: Boolean,
    default: true
  }
});
const getFormItemProps = computed(() => {
  const formItemProps = props.widget!["formItemProps"];
  if (formItemProps.required) {
    formItemProps.rules = [
      {
        required: true,
        trigger: ["blur", "change"],
        validator: (rule, value, callback) => {
          if (props.formModel![props.widget!.id]) {
            callback();
          } else {
            callback(new Error(formItemProps.label + "不能为空"));
          }
        }
      }
    ];
  }
  if (!props.showLabel) {
    return { ...formItemProps, label: " ", labelWidth: "0px" };
  }
  return formItemProps;
});
</script>

<style lang="scss" scoped></style>
